<template>
  <div v-waterMarker class="merak-float">
    <div class="header">
      <div class="leftTitle">
        <div class="title"></div>
      </div>
      <div class="btnBoxs">
        <div class="icon" @click="emit('close')">
          <el-icon size="20">
            <Close />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="merak-float-overflow-y">
           <div class="file_list_document">
        <div class="line_flex flex_err_info"> 
          <div class="firstTd"><span v-if="type=='video'">{{$t("goods_archive.upload_fail_video")}}</span><span v-else>{{$t("goods_archive.upload_fail_picture")}}</span></div>
          <div class="secondTd"><span v-if="type=='video'">{{$t("goods_archive.video_name")}}</span><span v-else>{{$t("goods_archive.picture_name")}}</span></div>
          <div>
            <!-- 失败原因 -->
            {{$t("goods_archive.fail_reason")}}
            </div>
        </div>
            <div
              class="line_flex"
              v-for="(errItem,errIndex) in errDataArr" 
              :key="errIndex"
            > 
              <div class="firstTd">
                <div class="thumbnail_cont">
                  <img class="thumbnail_img" :src="errItem.url" />
                  <div class="opration_shadow">
                    <span class="opration_icon" @click="lookPic(errIndex)">
                      <el-icon><ZoomIn /></el-icon
                    ></span>
                  </div>
                </div>
              </div>
              <div class="secondTd">{{ errItem.name }}</div>
              <div>{{ errItem.raw?.tip }}</div>
            </div> 
      </div>

      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="errorFileList">
import { api as viewerApi } from "v-viewer";
import { ref, reactive, computed } from "vue";
// 
const props = withDefaults(
  defineProps<{
    errDataArr?: object; //错误数组
    type?:string
  }>(),
  {
    type:"image"  //video 视频
  }
);


const lookPic=(index)=>{
  viewerApi({
    images: props.errDataArr,
    options: {
      toolbar: true,
      url: "url",
      fullscreen: false,
      initialViewIndex: index //默认打开哪个
    }
  });
}
	const emit = defineEmits<{
		close : [refresh: boolean];
	}>();

</script>
<style lang="scss" scoped>
@import url("./index.scss");
</style>
